<script lang="ts" setup>
  import { UserOutlined } from '@ant-design/icons-vue';
  import Badge from '@sscd/badge';
  import Avatar from '@sscd/avatar';
</script>

<template>
  <div class="demo">
    <div class="demo-title">带徽标的头像</div>
    <div class="demo-content">
      <span style="margin-right: 24px">
        <Badge :count="1">
          <Avatar shape="square">
            <template #icon><UserOutlined /></template>
          </Avatar>
        </Badge>
      </span>
      <span>
        <Badge dot>
          <Avatar shape="square">
            <template #icon><UserOutlined /></template>
          </Avatar>
        </Badge>
      </span>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .demo {
    .ant-avatar {
      margin-top: 0;
      margin-right: 0;
    }
  }
</style>
